<template>
  <div ref="dashboard" class="dashboard-container">
    <el-button type="primary" size="default" @click="screen">全屏</el-button>
    <countTo :start-val="1000" :end-val="10000" :duration="3000" />
    <el-progress :percentage="50" :color="customColor" />
    <div id="box" ref="box" />
    <div class="order">
      <Order />
    </div>
    <div class="purcles">
      <Purcles />
    </div>
    <div class="words">
      <Words />
    </div>
    <div class="map">
      <Map />
    </div>
    <div class="bg-animate">
      <BgAnimate />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import Order from './components/Order/index'
import Map from './components/Map/index'
import Words from './components/Words/index'
import Purcles from './components/Purcles/index'
import screenfull from 'screenfull'
import countTo from 'vue-count-to'
import BgAnimate from '@/components/BgAnimate.vue'
export default {
  name: 'Dashboard',
  components: {
    Order,
    Purcles,
    Words,
    Map,
    countTo,
    BgAnimate
  },
  data() {
    return {
      customColor: 'linear-gradient(to right, red , yellow)'
    }
  },
  mounted() {
    var date = new Date()
    setInterval(() => {
      console.log(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`)
    }, 1000)
    var myChart = echarts.init(this.$refs.box)
    // 绘制图表
    myChart.setOption({
      // echarts 标题
      title: {
        text: 'ECharts 入门示例'
      },
      // grid: {
      //   show: true
      // },
      // 提示框部分
      tooltip: {},
      // x轴部分
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', 'a袜子']
      },
      // y轴
      yAxis: {},
      // 表示数据，也表示数据映射成为的图
      // 一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
      series: [
        {
          name: '销量',
          type: 'bar',

          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    })
  },
  methods: {
    screen() {
      if (screenfull.isEnabled) {
        // 控制是否全屏的按钮
        screenfull.toggle(this.$refs.dashboard)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
#box{
  width: 400px;
  height: 400px;
}
.order,.purcles,.words,.map{
  width: 600px;
  height: 400px;
}
.dashboard-container ::v-deep .el-progress-bar__inner{
  background-image: linear-gradient(to right, red , yellow);
}
.bg-animate{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15%;
  }
</style>
